<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp"%>
<style>

</style>
<script type="text/javascript">
    var reportDataGrid_${id};
    $(function() {
        reportDataGrid_${id} = $('#reportDataGrid_${id}').datagrid({
            url : '${path}/sqlExcelReport/searchData?reportid=${id}',
            striped : true,
            rownumbers : true,
            pagination : true,
            singleSelect : true,
            idField : 'id',
            sortName : 'id',
            sortOrder : 'asc',
            pageSize : 20,
            pageList : [ 10, 20, 30, 40, 50, 100, 200, 300, 400, 500 ],
            columns : [ [
                <c:forEach var="field" items="${fields}">
                {
                    width : '100',
                    title : '${field.columnName}',
                    field : '${field.keyName}',
                    <c:if test="${field.columnType=='Date'}">
                    formatter:function(value,row,index){
                        return date2Str(value);
                    }
                    </c:if>
                    <c:if test="${field.columnType=='DateTime'}">
                    formatter:function(value,row,index){
                        return datetime2Str(value);
                    }
                    </c:if>
                },
                </c:forEach>

            ]],
            onLoadSuccess:function(data){
            },
            toolbar : '#reportToolbar_${id}'
        });
    });
function searchReport_${id}() {
    reportDataGrid_${id}.datagrid('load', $.serializeObject($('#reportForm_${id}')));
}

function clearReport_${id}() {
    $('#reportForm_${id} input,select').val('');
    reportDataGrid_${id}.datagrid('load',{});
}


</script>
<div class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'center',border:false">
        <table id="reportDataGrid_${id}"
               data-options="fit:true,border:false"></table>
    </div>
</div>
<div id="reportToolbar_${id}" style="display: none;">
    <form id="reportForm_${id}" style="width: 100%">
        <table>
                <tr>
                    <c:forEach items="${expressions}" var="expression">
                    <td>${expression.name}</td>
                    <td>
                        <c:if test="${expression.type=='String'}">
                            <input type="text" name="${expression.key}" class="easyui-text">
                        </c:if>
                        <c:if test="${expression.type=='Date'}">
                            <input type="text" name="${expression.key}Start" class="easyui-text" onclick="WdatePicker()">~
                            <input type="text" name="${expression.key}End" class="easyui-text" onclick="WdatePicker()">
                        </c:if>
                    </td>

                    </c:forEach>
                    <td>
                        <a href="javascript:void(0);" class="easyui-linkbutton"
                           data-options="iconCls:'fi-magnifying-glass',plain:true"
                           onclick="searchReport_${id}();">查询</a> <a
                            href="javascript:void(0);" class="easyui-linkbutton"
                            data-options="iconCls:'fi-x-circle',plain:true"
                            onclick="clearReport_${id}();">清空</a>

                    </td>
                    <td><a href="${path}/sqlExcelReport/export?reportid=${id}" class="easyui-linkbutton"
                           data-options="iconCls:'fi-arrow-down',plain:true"
                           >导出</a></td>
                </tr>
        </table>
    </form>
</div>
